<template>
  <el-container id="app" style="height:100%;" v-loading="loading">
    <el-header class="header" height="64px">
      <div class="container">
        <nav class="navbar-lg">
          <a class="logo" href="/home.html#/myclass" target="_blank">
            <img src="https://cdn.hterobot.com/vue/school/image/font-LOGO-1.png" alt />
          </a>
          <ul class="navbar-nav">
            <li class="nav-item">
              <router-link class="text-white router-link" :to="{name:'teacherdata'}">教师课件</router-link>
            </li>
            <li class="nav-item">
              <router-link class="text-white router-link" :to="{name:'itembank'}">测试题</router-link>
            </li>
            <li class="nav-item">
              <router-link class="text-white router-link" :to="{name:'finishin'}">完成测试</router-link>
            </li>
          </ul>
        </nav>
      </div>
    </el-header>
    <div class="container" v-if="!loading">
      <!-- <keep-alive> -->
        <router-view></router-view>
      <!-- </keep-alive> -->
    </div>
  </el-container>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "home",
  data() {
    return {
      mode: false,
      loading: true,
      show: false
    };
  },
  async mounted() {
    await this.start();
  },
  async beforeMount() {
    let x;
    try {
      x = await this.session();
      if (!x) {
        this.$message.error("账号还没有审核");
        this.$router.push("/login");
      }
    } catch (e) {
      this.$message.error("登陆已失效");
      this.$router.push("/login");
    }
  },
  methods: {
    first(v) {
      if (v == 1) {
        return "first";
      }
    },
    async start() {
      this.loading = true;
      Promise.all([
        this.actionTeacherproposal(),
        this.actionTpdata(),
        this.actionItembank(),
        this.actionItembankgroup()
      ]).then(() => {
        this.loading = false;
        this.show = true;
      });
    },
    ...mapActions([
      "session",
      "actionCourse",
      "actionCatebag",
      "actionCoursecatebag",
      "actionSecretfile",
      "actionTeacherproposal",
      "actionTpdata",
      "actionItembank",
      "actionItembankgroup",
      "actionItembankitembankgroup",
      "actionTeacherbyiditembank",
      "actionAnswer"
    ])
  }
};
</script>

<style  scoped>
.header {
  background-color: var(--my-bg-blue-color);
}
.logo {
  width: 274px;
  display: inline-block;
  text-align: center;
}
.navbar-lg {
  height: 64px;
  line-height: 64px;
  display: flex;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.navbar-nav {
  flex-direction: row;
}
.nav-item {
  width: 150px;
}
.router-link {
  width: 112px;
  height: 64px;
  display: block;
  transition: all 0.3s ease-in-out;
  text-align: center;
  margin: 0 auto;
}
.router-link:hover {
  background: rgba(56, 128, 223, 1);
  text-decoration: none;
  border-bottom: 2px solid #ffffff;
}
.router-link-active {
  background: rgba(56, 128, 223, 1);
  border-bottom: 4px solid #ffffff;
}
</style>